<template>
  <div class="live-floor-wrap" :class="{ two: showType == 2 }">
    <component
      :is="curComponent"
      v-for="(item, index) in list"
      :key="index"
      :index="index"
      :liveObj="item"
      :showType="showType"
      @onToNext="handleToNext(item, index)"
    />
  </div>
</template>

<script>
import liveOneCol from './liveOneCol.vue';
import liveMultiCol from './liveMultiCol.vue';

export default {
  name: 'liveFloor',
  components: {
    liveOneCol,
    liveMultiCol
  },
  props: {
    hotSaleLive: {
      type: Object,
      default: () => {}
    },
    floorName: {
      type: String,
      default: ''
    },
    floorIndex: {
      type: Number,
      default: 0
    },
    resId: {
      type: [Number, String],
      default: ''
    },
    hotSaleId: {
      type: String,
      default: ''
    },
    hotSaleName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: []
    };
  },
  computed: {
    showType() {
      const { showType } = this.hotSaleLive || {};
      return showType || 1;
    },
    curComponent() {
      return this.showType == 1 ? 'liveOneCol' : 'liveMultiCol';
    }
  },
  created() {
    this.$live.ready(() => {
      this.getLiveDetailList();
    });
  },
  methods: {
    handleToNext(item, index) {
      const obj = {
        10: item.liveType == 30 ? 'school-live-preheat' : 'live-preheat',
        20: item.liveType == 30 ? 'school-living' : 'living',
        default: item.liveType == 30 ? 'school-live-end' : 'live-end'
      };
      this.$router.push({
        name: obj[item.liveStatus] || obj.default,
        query: {
          liveNo: item.liveNo,
          liveType: item.liveType
        }
      });
      this.$ubt.click({
        spm: '2765.311',
        currentProperties: {
          list_name: this.floorName || '',
          list_rank: this.floorIndex + 1,
          market_id: this.hotSaleId || '',
          market_name: this.hotSaleName || '',
          resource_type: '直播',
          resource_pos_id: this.resId || '',
          resource_id: item.liveNo || '',
          resource_name: item.liveTitle || '',
          resource_rank: index + 1
        }
      });
    },
    getLiveDetailList() {
      let { liveDetails } = this.hotSaleLive || {};
      liveDetails = liveDetails || [];
      if (liveDetails.length === 0) return;
      const ids = liveDetails.map(item => item.liveRoomId);
      console.log('getLiveDetailList===', ids);
      // channel: 10 爱库存  20 H5 21 小程序
      this.$live
        .batchQueryLive({
          list: ids,
          channel: 20
        })
        .then(res => {
          console.log('getLiveDetailList=res===', res);
          if (res) {
            res.list = res.list || [];
            let list = [];
            ids.forEach(id => {
              const filterArr = res.list.filter(item => item.liveNo === id);
              if (filterArr.length > 0) {
                list.push(filterArr[0]);
              }
            });
            console.log('getLiveDetailList=list===', list);
            this.list = list;
          }
        })
        .catch(err => {
          console.log('err', err);
        });
    },
    getCurrentProperties(obj, index) {
      return JSON.stringify({
        list_name: this.floorName || '',
        list_rank: this.floorIndex + 1,
        market_id: this.hotSaleId || '',
        market_name: this.hotSaleName || '',
        resource_type: '直播',
        resource_pos_id: this.resId || '',
        resource_id: obj.liveNo || '',
        resource_name: obj.liveTitle || '',
        resource_rank: index + 1
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.live-floor-wrap {
  width: 355px;
  margin: 0 10px;
  display: flex;
  flex-wrap: wrap;
  &.two {
    justify-content: space-between;
  }
}
</style>
